<template>
  <div class="row mt-3">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <img class="mx-auto d-block" style="width: 200px;" src="../assets/images/icon.jpg" alt="Image"/>
          <form @submit.prevent="onSubmit" >
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" class="form-control" v-model="username" id="username"/>
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" class="form-control" v-model="password" id="password"/>
            </div>
            <div class="form-group">
              <label for="confirm-password">确认密码</label>
              <input type="password" class="form-control" v-model="cf_password" id="confirm-password"/>
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" class="form-control" v-model="email" id="email"/>
            </div>
            <button type="submit" class="btn btn-block btn-success">注册</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bmob from 'hydrogen-js-sdk'
// import axios from 'axios'
export default {
  name: 'Register',
  data () {
    return {
      email: '',
      username: '',
      password: '',
      cf_password: ''
    }
  },
  methods: {
    onSubmit () {
      console.log('提交')
      if (this.password === this.cf_password) {
        const formData = {
          email: this.email,
          username: this.username,
          password: this.password,
          cf_password: this.cf_password
        }
        Bmob.User.register(formData).then(res => {
          console.log(res)
          this.$router.push('/login')
        }).catch(err => {
          console.log(err)
        })
        // 利用axios传参  传数据会自动创建文件user.json
        // axios.post('/user.json', formData)
        //   .then(res => {
        //     this.$router.push('/login')
        //   })
      } else {
        alert('俩次密码不一致！')
        return false
      }
    }
  }
}

</script>

<style lang="stylus" scoped>
  .card-body img
    width 260px
    margin 50px 0 7
    0px
  .btn
    margin 35px 0 50px
</style>
